<template>
  <div class="share-img">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">走起</span>
    </div>
    <!-- 分享图片 -->
    <div class="share-pic">
      <div>
        <img :src="img_url" alt="" />
      </div>
    </div>
    <!-- 风向地址 -->
    <div class="share-option">
      <div class="share-item" @click="shareToCircle">
        <div class="pic">
          <img src="@/assets/share-icon/jL1.png" alt="" />
        </div>
        <div class="text">分享到朋友圈</div>
      </div>
      <div class="share-item" @click="shareToFriend">
        <div class="pic">
          <img src="@/assets/share-icon/cf.png" alt="" />
        </div>
        <div class="text">分享给好友</div>
      </div>
      <div class="share-item" @click="save_img">
        <div class="pic">
          <img src="@/assets/share-icon/s3.png" alt="" />
        </div>
        <div class="text">下载到本地</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
export default {
  props: ['id'],
  data() {
    return {
      img_url: ''
    }
  },
  methods: {
    // 请求详情数据
    async requestDetailData() {
      /*
      请求接口：https://api.xmonster.cn/v2/feeds/186505
      请求方式：get
      注：186505是当前点击的id
      */
      const data = await axios.get('/v2/feeds/' + this.id)
      if (data) {
        this.img_url = data.share_info.image_url
      }
    },
    save_img() {
      this.$toast('保存成功')
    },
    shareToFriend() {
      this.$toast.loading({
        message: '正在前往微信...'
      })
      setTimeout(() => {
        this.$dialog
          .confirm({
            title: '分享给好友',
            message: '确认要分享给该好友吗？'
          })
          .then(() => {
            this.$toast('分享成功')
          })
          .catch(() => {
            this.$toast('取消分享')
          })
      }, 2000)
    },
    shareToCircle() {
      this.$toast.loading({
        message: '正在前往朋友圈...'
      })
      setTimeout(() => {
        this.$dialog
          .confirm({
            title: '分享',
            message: '确认要分享到朋友圈？'
          })
          .then(() => {
            this.$toast('分享成功')
          })
          .catch(() => {
            this.$toast('取消分享')
          })
      }, 2000)
    }
  },
  async created() {
    const Toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中...'
    })
    try {
      await this.requestDetailData()
    } catch {
      Toast.clear()
      this.$toast.fail('请检查网络！')
    } finally {
      Toast.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.share-img {
  padding-top: 46px;
  padding-bottom: 60px;
  height: 100vh;

  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close {
      height: 30px;
      width: 30px;
      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          transform: rotate(180deg);
          height: 20px;
          width: 20px;
        }
      }
    }
  }
  img {
    height: 100%;
    width: 100%;
  }
  .share-pic {
    height: 100%;
    width: 100%;

    div {
      height: 100%;
      width: 90%;
      margin: 0 auto;
    }
  }
  .share-option {
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .share-item {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      &:nth-of-type(1) .pic {
        background-image: url('@/assets/share-icon/jL1.png');
      }
      &:nth-of-type(3) .pic {
        background-image: url('@/assets/share-icon/s3.png');
      }

      .pic {
        height: 30px;
        width: 30px;
        overflow: hidden;
        background-size: 150% 150%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .text {
        font-size: 12px;
        color: #666666;
        margin-top: 5px;
      }
    }
  }
}
</style>
